<template>
  <div class="user mbm">
    <a-form :form="formSettings" @submit="submitSettings">
      <h4 class="step_title mbm">GPIO状态</h4>
      <div class="pin_list mbm">
        <div class="side" v-for="(v,k) in pinList" :key="k">
          <div
            :class="bcmList[pv.BCM]== 0 ?'pin low':'pin high'"
            v-for="(pv,pk) in v"
            :key="pk"
          >{{pv.BCM}}</div>
        </div>
      </div>
      <h4 class="step_title mbm">设备AT日志</h4>
      <div class="at_log">
        <a-textarea
          placeholder
          :autosize="{ minRows: 20, maxRows: 25 }"
          class="cmdtext"
          ref="cmdtext"
          v-model="redata"
        />
      </div>

      <a-tabs>
        <a-tab-pane tab="AT命令" key="1">
          <div class="wrapper">
            <a-form-item>
              <a-input
                class="talk_input mrm"
                style="width: 300px"
                placeholder="请输入AT命令"
                v-decorator="['at',{ rules: [{ required: true, message: '这里不能为空哦！' }] }]"
              />
            </a-form-item>
          </div>
          <a-form-item>
            <a-button class="mbm mrm" type="primary" html-type="submit">立即提交</a-button>
            <a-button class="mbm" type="danger" @click="clearAT">清空</a-button>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane tab="识别测试" key="2">
          <div class="wrapper">
            <a-form-item>
              <a-select placeholder="请选择一个现有PCM文件测试" style="width: 320px" @change="handleChange">
                <a-select-option
                  :value="pcm.path"
                  v-for="pcm in listPCM"
                  :key="pcm.path"
                >{{pcm.path}}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </div>
</template>
<script>
import base from "@/api/base"; // 导入接口域名列表
export default {
  data() {
    return {
      websock: {},
      redata: "",
      reconect: 3,
      scrollHeight: 0,
      listPCM: [],
      pinList: {},
      bcmList: {}
    };
  },
  created() {
    this.formSettings = this.$form.createForm(this, {
      name: "form_settings"
    });
  },
  mounted() {
    if (typeof this.$store.state.common.token.str != "undefined") {
      this.initWebSocket();
      this.loadAT();
      this.loadPCM();
      this.loadPin();
    }
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    submitSettings(e) {
      e.preventDefault();
      this.formSettings.validateFields((err, values) => {
        if (!err) {
          this.$api.setting
            .AT({
              at: values.at
            })
            .then(() => {
              this.formSettings.setFieldsValue({
                at: ""
              });
              //this.$message.info("AT提交完成！");
            })
            .catch(err => {
              console.log(err);
            });
          //this.websocketsend(values.at)
        }
      });
    },
    loadPCM() {
      this.$api.test.getPCMList().then(res => {
        this.listPCM = res;
      });
    },
    loadAT() {
      this.$api.setting.getAT().then(res => {
        this.redata = res;
        this.scrollBottom();
      });
    },
    loadPin() {
      this.$api.setting.getPinList().then(res => {
        this.pinList = res;
        this.pinList.Outside.forEach(v => {
          this.bcmList[v.BCM] = 1;
        });
        this.pinList.Inside.forEach(v => {
          this.bcmList[v.BCM] = 1;
        });
      });
    },
    clearAT() {
      this.$api.setting.delAT().then(() => {
        this.redata = "";
      });
    },
    handleChange(value) {
      this.$api.test.fileASR({ path: value });
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = `${base.url.ws}/ws`;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      //let actions = {};
      //this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      if (this.reconect > 0) {
        this.initWebSocket();
        this.reconect--;
      }
    },
    websocketonmessage(e) {
      //数据接收
      let data = JSON.parse(e.data);
      let msg = typeof data.M != "undefined" ? data.M : "";

      if (typeof data.T != "undefined") {
        if (data.T == 1) {
          this.redata = this.redata + msg;
        } else if (data.T == 2) {
          this.bcmList[msg.Pin] = msg.State;
        }
      }
      this.scrollBottom();
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      this.redata = "连接已断开";
      console.log("断开连接", e);
    },
    scrollBottom() {
      this.$nextTick(() => {
        this.scrollHeight = document.querySelector(".cmdtext").scrollHeight;
        document.querySelector(".cmdtext").scrollTop = this.scrollHeight;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.pin_list {
  .side {
    margin-bottom: 5px;
    .pin {
      background: #808080;
      width: 20px;
      text-align: center;
      display: inline-block;
      margin-right: 5px;
      color: #fff;
      font-size: 10px;
      line-height: 20px;
      &.low {
        background: #06b400;
      }
    }
  }
}
</style>